<template>
	<div id="app-nav">
		<mu-appbar :color="theme.nav.color" :textColor="theme.nav.textColor">
			<mu-button icon slot="left" class="left-icon">
				<mu-icon value="favorite" @click="backHome"></mu-icon>
			</mu-button>
			{{ width > 768 ? title : "高考2020" }}
			<mu-menu slot="right">
				<mu-button flat>主题</mu-button>
				<mu-list slot="content">
					<mu-list-item
						button
						v-for="i in themeName.length"
						:key="i"
						@click="setTheme(i - 1)"
					>
						<mu-list-item-content>
							<mu-list-item-title>{{ themeName[i - 1] }}</mu-list-item-title>
						</mu-list-item-content>
					</mu-list-item>
				</mu-list>
			</mu-menu>
		</mu-appbar>
	</div>
</template>

<script lang="ts">
import { createComponent, computed } from "@vue/composition-api";
import { useWindow } from "/utils/useHooks";
import { title } from "/utils/config";

export default createComponent({
	name: "app-nav",
	setup(props, ctx) {
		const theme = computed(() => ({ ...ctx.root.$store.state.theme.theme }));
		const themeName = ["默认", "朝阳", "浅粉", "森林"];
		const { width } = useWindow();
		function backHome() {
			ctx.root.$router.push({ name: "home" });
		}

		function setTheme(id: number) {
			ctx.root.$store.commit("theme/SET_THEME", id);
		}

		return { width, title, theme, backHome, themeName, setTheme };
	}
});
</script>

<style lang="less">
#app-nav {
	.mu-appbar {
		width: 100%;
	}

	.left-icon {
		@media screen and (max-width: 768px) {
			display: none;
		}
	}
}
</style>
